<template>
    <div class="page">
        <img src="@/assets/awards-bg.jpg" alt="" class="bg" />
        <div class="container">
            <div class="title">
                <span>三大类奖项</span>
            </div>
            <div class="wrapper">
                <div class="tips">单一奖项排名不分先后</div>
                <div class="awards-name">2023年度{{ type }}</div>
                <div class="list">
                    <div
                        class="item"
                        v-for="item in list"
                        :key="item.id"
                        @click="
                            $router.push({
                                path: `/awardsDetail/${item.id}`,
                            })
                        "
                    >
                        {{ item.name }}
                    </div>
                </div>
                <img
                    class="back"
                    src="@/assets/back.png"
                    alt=""
                    @click="$router.back()"
                />
                <img src="@/assets/logo1.png" alt="" class="logo" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import data0 from "../data/data0";
    import { useRoute } from "vue-router";
    const route = useRoute();
    const type = route.params.type;
    onMounted(() => {
        initList();
    });
    const list = ref();
    const initList = () => {
        let arr = data0.filter((item) => item.type == type);
        list.value = arr.map((item) => item);
    };
</script>

<style lang="scss" scoped src="./SubAwardsList.scss"></style>
